<template>
  <div class="line-set-layout">
    <div class="new-set" v-show="isNew">
      <img src="../assets/img/setline.png" class="new01">
      <img src="../assets/img/can.png" class="new02">
      <img src="../assets/img/ikown.png" class="new03" @click="isNew=false">
    </div>
    <ul class="set-list">
      <li class="clearfix" @click="toSetLine">
        <div class="left fl">设置提醒线路</div>
        <div class="right fr">
          <span class="txt">{{setObj.line}}</span>
          <i class="icon-to"></i>
        </div>
      </li>
      <li class="clearfix" @click="toSetStop">
        <div class="left fl">设置提醒站点</div>
        <div class="right fr">
          <span class="txt">{{setObj.state}}</span>
          <i class="icon-to"></i>
        </div>
      </li>
      <li @click="$refs.picker.open()" class="clearfix">
        <div class="left fl">设置提醒时间</div>
        <div class="right fr">
          <span class="txt">{{setObj.time}}</span>
          <i class="icon-to"></i>
        </div>
      </li>
      <li @click="weekUp=true" class="clearfix">
        <div class="left fl">设置重复</div>
        <div class="right fr">
          <span class="txt">{{setObj.week.join('、')}}</span>
          <i class="icon-to"></i>
        </div>
      </li>
    </ul>
    <div class="set-btn">
      <input type="button" value="完成" @click="setLine">
    </div>
    <div class="picker-layout" v-show="lineUp|stateUp|weekUp"></div>
    <!--线路选择-->
    <div class="line" :class="{'line-up':lineUp}">
      <div class="pick-btn clearfix">
        <span @click="lineUp = false">取消</span>
        <span @click="lineConfirm">确定</span>
      </div>
      <mt-picker :slots="lineObj" @change="lineSelect"></mt-picker>
    </div>
    <!--站点选择-->
    <div class="line" :class="{'line-up':stateUp}">
      <div class="pick-btn clearfix">
        <span @click="stateUp = false">取消</span>
        <span @click="stateConfirm">确定</span>
      </div>
      <mt-picker :slots="stopObj" @change="stateSelect"></mt-picker>
    </div>
    <!--时间选择-->
    <mt-datetime-picker ref="picker" type="time" @confirm="timeSelect" v-model="params.time"></mt-datetime-picker>
    <!--星期选择-->
    <div class="line" :class="{'line-up':weekUp}">
      <div class="pick-btn clearfix">
        <span @click="weekUp = false">取消</span>
        <span @click="weekConfirm">确定</span>
      </div>
      <mt-checklist align="right" v-model="params.week" :options="weekObj"></mt-checklist>
    </div>
  </div>
</template>
<script>
  import {getDetail, lineGet, lineSet} from '../utils/http'
  import {weekVal, showToast} from '../utils/public'

  export default {
    data() {
      return {
        isNew: false,
        lineSet: '',
        lineObj: [{flex: 1, values: [], textAlign: 'center'}],
        stopObj: [{flex: 1, values: [], textAlign: 'center'}],
        weekObj: [
          {label: '周一', value: '1'},
          {label: '周二', value: '2'},
          {label: '周三', value: '3'},
          {label: '周四', value: '4'},
          {label: '周五', value: '5'},
          {label: '周六', value: '6'},
          {label: '周日', value: '7'}
        ],
        lineUp: false,
        stateUp: false,
        weekUp: false,
        params: {
          lineId: '',
          lineNo: '',
          clickStopName: '',
          direction: '',
          stopId: '',
          lineObj: [],
          line: '未选择',
          state: '未选择',
          time: '07:30',
          week: ['1', '2', '3', '4', '5']
        },
        setObj: {
          line: '未选择',
          state: '未选择',
          time: '07:30',
          week: ['一', '二', '三', '四', '五']
        }
      }
    },
    mounted() {
      this.onReady()
    },
    methods: {
      onReady() {
        let lineSet = JSON.parse(localStorage.getItem('lineSet'))
        let setLineId = JSON.parse(localStorage.getItem('setLineId'))
        if (lineSet) {
          this.lineSet = lineSet
          this.params.lineId = lineSet.lineId
          this.params.lineNo = lineSet.lineNo
          this.params.direction = lineSet.direction
          lineSet.stops.forEach((v, i) => {
            if (v.isChoice) {
              this.params.clickStopName = v.stopName
            }
            this.stopObj[0].values.push(v.stopName)
          })
          let str = `${lineSet.lineName}路（${lineSet.endStopName}方向）`
          let obj = {
            line: str,
            lineId: lineSet.lineId
          }
          this.params.lineObj.push(obj)
          this.lineObj[0].values.push(str)
          /*
          *  换向添加线路数据
          * */
          if (lineSet.line2Id) {
            this.params.lineId = lineSet.line2Id
          } else {
            let arr = this.params.lineId.split('-')
            if (arr.length === 4) {
              this.params.lineId = arr[0] + '-' + arr[2] + '-' + arr[3]
            } else {
              this.params.lineId = arr[0] + '--' + arr[1] + '-' + arr[2]
            }
          }
          getDetail({
            lineId: this.params.lineId,
            clickStopName: this.params.clickStopName,
            cb: (data, array) => {
              this.params.direction = data.direction
              this.lineDetail = data
              let str = `${data.lineName}路（${data.endStopName}方向）`
              let obj = {
                line: str,
                lineId: data.lineId
              }
              this.params.lineObj.push(obj)
              this.lineObj[0].values.push(str)
            }
          })
          // 设置线路设置初始化数据
          this.params.lineId = this.params.lineObj[0].lineId
          this.params.line = this.lineObj[0].values[0]
          this.params.state = this.params.clickStopName
          this.setObj.line = this.lineObj[0].values[0]
          this.setObj.state = this.params.clickStopName
          this.lineGet()
        } else if (setLineId) {
          this.params.lineId = setLineId.lineId
          getDetail({
            lineId: this.params.lineId,
            cb: (data, array) => {
              localStorage.setItem('lineSet', JSON.stringify(data))
              this.onReady()
            }
          })
        } else {
          this.isNew = true
        }
      },
      // 获取用户历史设置信息
      lineGet() {
        lineGet({
          cb: (data) => {
            if (data.lineId === this.params.lineId) {
              this.lineSet.stops.forEach((v, i) => {
                if (v.stopId === data.stopId) {
                  this.params.state = v.stopName
                  this.setObj.state = v.stopName
                }
              })
              this.params.time = data.noticeTime
              this.params.week = data.noticeLoop.split(',')
              this.setObj.time = data.noticeTime
              this.setObj.week = weekVal(data.noticeLoop.split(','))
            }
          }
        })
      },
      // 设置线路方向
      toSetLine() {
        const {from} = this.$route.query
        if (from && from === 'self') {
          this.$router.push({path: 'lineQuery', query: {to: 'lineSet'}})
        } else {
          this.lineUp = true
        }
      },
      toSetStop() {
        let lineSet = JSON.parse(localStorage.getItem('lineSet'))
        if (lineSet) {
          this.stateUp = true
        }
      },
      /*  时间选择  */
      timeSelect(time) {
        this.setObj.time = time
      },
      /*  线路选择 */
      lineSelect(picker, values) {
        this.params.line = values[0]
      },
      lineConfirm() {
        this.setObj.line = this.params.line
        this.lineUp = false
      },
      // 站点选择
      stateSelect(picker, values) {
        this.params.state = values[0]
      },
      stateConfirm() {
        this.setObj.state = this.params.state
        this.stateUp = false
      },
      // 星期选择
      weekConfirm() {
        this.setObj.week = weekVal(this.params.week.sort())
        this.weekUp = false
      },
      // 设置线路提醒
      setLine() {
        this.params.lineObj.forEach((v, i) => {
          if (this.setObj.line === v.line) {
            this.params.lineId = v.lineId
          }
        })
        this.lineSet.stops.forEach((v, i) => {
          if (v.stopName === this.setObj.state) {
            this.params.stopId = v.stopId
          }
        })
        lineSet({
          lineId: this.params.lineId,
          stopId: this.params.stopId,
          time: this.setObj.time,
          loop: weekVal(this.setObj.week).join(','),
          cb: () => {
            showToast({message: '设置成功！', duration: 500})
            localStorage.removeItem('lineSet')
            this.$router.push({path: '/lineDetail'})
          }
        })
      }
    }
  }
</script>
<style scoped>
  @import "../assets/css/lineSet.css";
</style>
